<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="./js/vue.js"></script>
<style>
    .outer{
        width: 200px;
        height: 200px;
        background-color: red;
    }
    .inner{
        width: 100px;
        height: 100px;
        background-color: green;
    }
    .wrap{
        width: 300px;
        height: 300px;
        background-color: pink;
    }
    .child{
        width: 200px;
        height: 200px;
        background-color: red;
    }
    .sun{
        width: 100px;
        height: 100px;
        background-color: yellow;
    }
</style>
<body>
    <div class="box">
        <!-- 事件冒泡时默认的事件形式 -->
        <!-- 阻止事件冒泡 -->
        <div class="outer" @click="outer">
            <div class="inner" @click.stop="inner"></div>
        </div>
        <!-- .capture的作用是开启事件捕获  从外到内 -->
        <div class="outer" @click.capture="outer1">
            <div class="inner" @click="inner1"></div>
        </div>
        <!-- a链接跳转   阻止浏览器的默认行为  .prevent-->
        <a href="http://baidu.com" @click.prevent>百度一下</a>
        <!-- .self .once .passive -->
        <!-- .self 只能通过自己去触发不受冒泡捕获影响 -->
        <div class="wrap" @click="test1">
            <div class="child" @click.self="test2">
                <div class="sun" @click="test3"></div>
            </div>
        </div>
        <button @click.once="btnTest">xxxx</button>
    </div>
    <script>
        const vm = new Vue({
            el:'.box',
            data:{

            },
            methods: {
                outer(){
                    console.log('这是外层盒子')
                },
                inner(){
                    console.log('这是内层盒子')
                },
                outer1(){
                    console.log('这是外层盒子')
                },
                inner1(){
                    console.log('这是内层盒子')
                },
                test1(){
                    console.log(11)
                },
                test2(){
                    console.log(22)
                },
                test3(){
                    console.log(33)
                },
                btnTest(){
                    console.log('btn')
                }
            },
        })
        /* 
        事件冒泡 内到外
        事件捕获  外到内
        阻止浏览器的默认行为 a链接跳转
        
        */
    </script>
</body>
</html>